<template>
	<div class="store-configure-manager">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" :rules="rules" label-width="120px" class="demo-ruleForm">
					<div class="content_info">
						<el-form-item v-for="(item, index) in info.list" :key="index" :label="item.label">
							<el-radio-group v-model="item.isOpen">
								<el-radio :label=1>{{ $t('publicBtn.open') }}</el-radio>
								<el-radio :label=0>{{ $t('publicBtn.close') }}</el-radio>
							</el-radio-group>
						</el-form-item>
					</div>
					<div class="footerBtn">
						<el-button @click="getCancle">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
						<el-button type="primary" @click="addSubmitForm" v-loading.fullscreen.lock="fullscreenLoading">{{
							$t('el.popconfirm.confirmButtonText') }}</el-button>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
import {
	getConfigs,
	setConfig
} from '@/api/organizational-chart'
export default {
	name: '',
	components: {},
	data() {
		return {
			checkList: [],
			channelList: [], //渠道名称list
			info: {
				list: []
			},
			brandList: [], //品牌
			rules: {},
			fullscreenLoading: false,
			flag: false
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
	},
	watch: {
	},
	mounted() {
		this.id = this.$route.query.id
		this.getInfo()
	},
	created() { },

	activated() { },
	destroyed() { },
	methods: {
		getInfo() {
			getConfigs(this.id).then(res => {
				if (res.code === 200) {
					if (res.data) {
						res.data.map(i => {
							if (i.codeNum === 1) {
								i['label'] = this.$t('publicFormLabel.cueDescription')
							}
							if (i.codeNum === 2) {
								i['label'] = this.$t('publicFormLabel.optionalPackage')
							}
							if (i.codeNum === 3) {
								i['label'] = this.$t('publicFormLabel.lockCar')
							}
							i.branchId = this.id
						})
						this.info.list = res.data
					}
				}
			})
		},
		addSubmitForm() {
			this.$refs['info'].validate(valid => {
				if (valid) {
					this.fullscreenLoading = true
					setConfig(this.info.list)
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.operationSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
							console.log(err, 'err')
						})
				} else {
					return false
				}
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.store-configure-manager {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			&>.el-form {
				width: 100%;
				height: 100%;

				&>.content_info {
					width: 100%;
					height: calc(100% - 40px);
					overflow: hidden;
					overflow-y: auto;
				}

				::v-deep .el-input .el-input__clear {
					display: none;
				}

				::v-deep {
					.configWarp {
						color: #606266;
						font-weight: bold;
						font-size: 14px;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.el-icon-info {
							color: #dcdfe6;
							font-size: 15px;
							cursor: pointer;
							margin-right: 10px;
						}
					}

					.configInfo {
						padding-bottom: 20px;
						color: #606266;
						font-weight: 500;
						font-size: 14px;
						display: none;

						div {
							line-height: 24px;
							text-indent: 20px;
						}

						.explain {
							margin-left: 120px;
						}
					}
				}

				.footerBtn {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
